<template>
  <view class="addComment-box">
    <view class="trigger-Dom" @click="show = true">点击输入评论</view>
    <u-popup v-model="show" mode="bottom">
      <view class="popup-box">
        <view class="btn-box">
          <view @click="removeComment">取消</view>
          <view @click="saveValue">发送</view>
        </view>
        <view>
          <textarea
            v-model="commentValue"
            class="textarea-dom"
            :show-confirm-bar="false"
            placeholder="请输入"
          />
        </view>
      </view>
    </u-popup>
  </view>
</template>

<script>
import { addComment } from "@/api/detail.js";
export default {
  data() {
    return {
      show: false,
      commentValue: "",
      overFlag: false,
    };
  },
  props: {
    replyId: {
      type: String,
      default: "",
    },
  },
  methods: {
    removeComment() {
      this.commentValue = "";
      this.show = false;
    },
    saveValue() {
      addComment(this.replyId, {
        content: this.commentValue,
      }).then((res) => {
        if (res.success) {
          uni.showToast({
            title: "发送成功",
            icon: "success",
            mask: true,
          });
          this.show = false;
          this.commentValue = "";
          this.$emit("getDataFn", this.replyId);
        }
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.addComment-box {
  position: fixed;
  height: 100rpx;
  border-top: 1px solid #ccc;
  background: #fff;
  bottom: 0;
  left: 0;
  right: 0;
  .trigger-Dom {
    border: 1px solid #ccc;
    padding: 10rpx 20rpx;
    margin: 10rpx;
    color: #ccc;
  }
  .popup-box {
    padding: 20rpx;
    .btn-box {
      display: flex;
      justify-content: space-between;
      margin-bottom: 10rpx;
    }
    .textarea-dom {
      border: 1px solid #ccc;
      width: 100%;
    }
  }
}
</style>